<script setup>
import Nav_bottom from "../../components/navigation/bottom/nav_bottom.vue";
// 1到如
// 导入获取新闻、轮播图、新公告的API函数
import {getNews, getSliderImg, getNewAnnouncement, getMenu} from "../../api/home/home";
// 导入Vue的响应式引用ref
import {ref} from "vue"
// 导入基础URL
import {baseUrl} from "../../api/http";
// 导入获取用户信息的API函数
import {getHomeUserInfo, getUserInfo} from "../../api/user/user";
// 从store中获取用户ID
import {getUserId} from "../../store";
import Menu_item from "../../components/menu/menu_item.vue";
import {goAiManage, goAnnouncementDetails, goNews, goNewsList,} from "../../tools/go";


// 定义快捷方式列表
const list = ref([])
// 2
// 定义轮播图列表的响应式引用
const sliderList = ref([]);
// 定义用户信息的响应式引用
const userInfo = ref({
  userNick:"",
  userImg:"",
})

// 定义新闻列表的响应式引用
const xwlist = ref()
// 定义公告的响应式引用
const gg = ref(
    {id:0, title:'【2026年】community社区"安全年"'},
)


const yuansu = ref(null)
const isdata = ref(false)
const position = ref({left: window.innerWidth - 100,top:window.innerHeight - 200})
const stearDarg = ref({x:0,y:0})




const stratDrag = (e) =>{
  isdata.value = true
  const touch = e.touches[0]
  stearDarg.value.x = touch.clientX - position.value.left
  stearDarg.value.y = touch.clientY - position.value.top
  document.addEventListener('touchmove',onDrag)
  document.addEventListener('touchend',stop)
}

const onDrag = (e) => {
  if(isdata.value){
    const touch = e.touches[0]
    position.value.left = touch.clientX - stearDarg.value.x
    position.value.top = touch.clientY - stearDarg.value.y
  }
}

const stop = () => {
  removeEventListener('touchmove',onDrag)
  removeEventListener('touchend',stop)
  soo()
}

const soo = () =>{
  const winWitdh = window.innerWidth
  const elementWidth = yuansu.value.offsetWidth
  const elementLeft = position.value.left

  if(elementLeft < winWitdh){
    position.value.left = 10
  }else {
    position.value.left = winWitdh - elementWidth
  }
}

// 3
// 获取用户信息的函数
const user = () => {
  getHomeUserInfo(getUserId()).then(res => {
    userInfo.value = res.data
  })
}

// 获取轮播图的函数
const slider = () => {
  getSliderImg("home").then(res => {
    sliderList.value = res.data
  })
}

// 获取新闻的函数
const xw = () => {
  getNews(1,10).then(res => {
    xwlist.value = res.data.records
  })
}

// 获取公告的函数
const announcement = () => {
  getNewAnnouncement().then(res => {
    gg.value = res.data
  })
}

const Menu = () => {
  getMenu().then(res => {
    //console.log(res)
    list.value = res.data
  })
}

// 初始化页面数据的函数
const init = () => {
  slider()
  user()
  xw()
  announcement()
  Menu()
}

// 调用初始化函数
init()
</script>

<template>
  <view class="back">

    <view class="AI"
          ref="yuansu"
          @touchstart="stratDrag"
          :style="({left:position.left + 'px' , top:position.top + 'px'})"
    >
      <img @click="goAiManage" src="../../static/img/ai_logo.png" alt="">
    </view>

    <!-- 顶部 -->
    <view class="header">
      <!-- 返回按钮 -->
      <view class="fanhui">
        <v-icon icon="mdi-close tb"></v-icon>
      </view>
      <!-- 标题 -->
      <h3>首页</h3>
      <!-- 更多选项按钮 -->
      <view class="gd">
        <v-icon icon="mdi-dots-horizontal dian"></v-icon>
      </view>
    </view>
    <!-- 内容 -->
    <view class="main">
      <!-- 用户信息 -->
      <view class="logo w">
        <view class="user">
          <img :src="baseUrl + userInfo.img">
          <text>{{ userInfo.nick }},你好</text>
        </view>
        <view class="Weather">
          <text>北京市<br>阴15℃</text>
          <img src="../../static/img/indeximg/kjfs/icons8-rain-100.png">
        </view>
      </view>
      <!-- 轮播图 -->
      <view class="lbt">
        <v-carousel
            :width="100"
            :height="200"
            :show-arrows="false"
            cycle
            :interval="3000"
            hide-delimiter-background
        >
          <v-carousel-item
              v-for="(i, index) in sliderList"
              :key="index"
              cover
              :src="baseUrl + i.img"
              style="width: 100%; height: 100%;"
          />
        </v-carousel>
      </view>
      <!-- 快捷方式 -->
      <view class="shortcut w">
        <ul class="nav">
          <li v-for="item in list" :key="item.id">
            <menu_item :img="item.img" :text="item.text" :href="item.href + '?flag=1'"></menu_item>
          </li>
        </ul>
      </view>
      <!-- 公告 -->
      <view  class="announcement w" @click="goAnnouncementDetails(gg.id)">
        <view class="tlitl" >
          <img :src="'./static/img/indeximg/kjfs/gg.png'">
          <text>最新公告</text>
        </view>
        <view class="content">
          <text class="xunhuai" >{{ gg.title }}</text>
        </view>
        <view class="fanhui2"><v-icon icon="mdi-chevron-right"></v-icon></view>
      </view>
      <!-- 社区新闻 -->
      <view class="xw w">
        <!-- 标题 -->
        <view class="tilil">
          <h3>社区新闻</h3>
          <view class="gd" @click="goNewsList">
            <text>查看更多</text>
            <v-icon icon="mdi-chevron-right"></v-icon>
          </view>
        </view>
        <!-- 列表 -->
        <view class="list">
          <ul>
            <li v-for="(a,index) in xwlist" :key="index" @click="goNews(a.newsId)">
              <a >
                <img :src="baseUrl + a.newsImg">
                <view class="content">
                  <text>{{ a.newsTitle }}</text>
                  <text>{{ a.newsPublicTime }}</text>
                </view>
              </a>
            </li>
          </ul>
        </view>
      </view>
      <!-- 占位 -->
      <view class="none w">
      </view>
    </view>
    <!-- 底部导航 -->
  </view>
  <nav_bottom></nav_bottom>
</template>

<style scoped lang="scss">
@use "../../static/css/main";
.AI{
  img{
    width: 100%;
    height: 100%;
  }
  z-index: 99;
  width: 100px;
  height: 100px;
  position: fixed;
  top: 70vh;
  left: 10px;
  touch-action: none;
}
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 隐藏滚动条但允许滚动 */
body::-webkit-scrollbar,
.list::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.back{
  @include main.useTheme() {
    /* 基础样式 */
    min-height: 100vh;
    width: 100%;
    background: main.getVal('primary_bg_color');
    display: flex;
    flex-direction: column;

    /* 通用宽度类 */
    .w {
      width: 95%;
      margin: 0 auto;
      position: relative;
    }
    //.ai{
    //  img{
    //    width: 100%;
    //    height: 100%;
    //  }
    //  z-index: 999;
    //  position: fixed;
    //  overflow: hidden;
    //  top: 70vh;
    //  right: 10px;
    //  width: 70px;
    //  height: 70px;
    //  border-radius: 100%;
    //  touch-action: none;
    //}
    /* 头部样式 */
    .header {
      width: 100%;
      height: 60px;
      background: main.getVal('primary_bg_color');
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid main.getVal('primary_border_color');

      h3 {
        line-height: 50px;
        font-size: 19px;
        font-weight: 500;
        color: main.getVal('primary_text_color');
      }

      .fanhui .tb {
        opacity: 0;
        margin-left: 25px;
        font-size: 30px;
        color: main.getVal('primary_text_color');
      }

      .gd .dian {
        margin-right: 25px;
        font-size: 30px;
        color: main.getVal('primary_text_color');
        cursor: pointer;
        transition: color 0.2s ease;

        &:hover {
          color: main.getVal('pri_color');
        }
      }
    }

    /* 主体内容样式 */
    .main {
      flex: 1;
      width: 100%;
      background: main.getVal('primary_bg_color');
      display: flow-root;
      font-size: 14px;
      padding-bottom: 60px; /* 为底部导航腾出空间 */

      /* 用户信息样式 */
      .logo {
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .user {
          display: flex;
          align-items: center;
          gap: 10px;

          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid main.getVal('primary_border_color');
            object-fit: cover;
          }

          text {
            font-size: 16px;
            color: main.getVal('primary_text_color');
            font-weight: 500;
          }
        }

        .Weather {
          display: flex;
          align-items: center;

          text {
            font-size: 14px;
            margin-left: 10px;
            color: main.getVal('one_lv_text_color');
            line-height: 1.4;
            text-align: right;
          }

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }

      /* 轮播图样式 */
      .lbt {
        width: 95%;
        height: 200px;
        border-radius: 12px;
        overflow: hidden;
        margin: 15px auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 12px;
        }

        :deep(.v-carousel) {
          border-radius: 12px;
        }
      }

      /* 快捷方式样式 */
      .shortcut {
        background: main.getVal('primary_bg_color');
        border-radius: 12px;
        margin-top: 15px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
        overflow: hidden;

        .nav {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 10px;
          padding: 15px 10px;

          li {
            transition: transform 0.2s ease;

            &:hover {
              transform: translateY(-2px);
            }

            a {
              display: flex;
              flex-direction: column;
              align-items: center;
              text-decoration: none;

              img {
                width: 50px;
                height: 50px;
                margin-bottom: 8px;
                border-radius: 10px;
              }

              text {
                font-size: 12px;
                color: main.getVal('primary_text_color');
                text-align: center;
              }
            }
          }
        }
      }

      /* 公告样式 */
      .announcement {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
        background: main.getVal('one_lv_bg_color');
        border-radius: 8px;
        height: 43px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);

        .tlitl {
          display: flex;
          align-items: center;
          margin-left: 15px;
          border-right: 1px solid main.getVal('one_lv_border_color');
          height: 12px;
          width: 90px;

          img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }

          text {
            color: main.getVal('pri_color');
            font-size: 12px;
            font-weight: 500;
          }
        }

        .content {
          width: 225px;
          overflow: hidden;

          .xunhuai {
            animation: move 10s linear infinite;
            margin-left: 15px;
            font-size: 13px;
            color: main.getVal('primary_text_color');
            white-space: nowrap;
          }
        }

        .fanhui2 {
          padding-right: 10px;

          :deep(.mdi-chevron-right) {
            font-size: 20px;
            color: main.getVal('one_lv_text_color');
          }
        }
      }

      /* 社区新闻样式 */
      .xw {
        background: main.getVal('one_lv_bg_color');
        border-radius: 12px;
        margin-top: 15px;
        padding: 15px 10px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);

        /* 标题样式 */
        .tilil {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;

          h3 {
            font-weight: 500;
            font-size: 18px;
            color: main.getVal('primary_text_color');
          }

          .gd {
            display: flex;
            align-items: center;
            margin-left: 5px;
            color: main.getVal('one_lv_text_color');
            cursor: pointer;

            &:hover {
              color: main.getVal('pri_color');
            }

            text {
              font-size: 12px;
            }

            :deep(.mdi-chevron-right) {
              font-size: 18px;
            }
          }
        }

        /* 新闻列表样式 */
        .list {
          width: 100%;
          overflow: auto;
          max-height: 300px;
          background: main.getVal('primary_bg_color');
          border-radius: 8px;

          ul {
            padding: 5px 0;

            li {
              display: flex;
              flex-direction: column;
              margin: 10px 0;
              padding: 5px;
              border-bottom: 1px solid main.getVal('two_lv_bg_color');

              &:last-child {
                border-bottom: none;
              }

              a {
                display: flex;
                padding: 5px;
                transition: background-color 0.2s ease;
                border-radius: 5px;

                &:hover {
                  background-color: main.getVal('two_lv_bg_color');
                }

                img {
                  width: 90px;
                  height: 60px;
                  object-fit: cover;
                  border-radius: 5px;
                }

                .content {
                  display: flex;
                  flex-direction: column;
                  margin: 0 10px;
                  justify-content: space-between;
                  flex: 1;

                  text:nth-child(1) {
                    color: main.getVal('primary_text_color');
                    font-size: 14px;
                    line-height: 1.4;
                    font-weight: 500;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                  }

                  text:nth-child(2) {
                    color: main.getVal('two_lv_text_color');
                    font-size: 12px;
                    padding-top: 5px;
                  }
                }
              }
            }
          }
        }
      }

      /* 占位区域，为底部导航腾出空间 */
      .none {
        height: 70px;
      }
    }

    /* 文字滚动动画 */
    @keyframes move {
      from {
        position: relative;
        left: 140%;
      }
      to {
        position: relative;
        left: -140%;
      }
    }
  }
}

/* 响应式设计 */
@media screen and (max-width: 480px) {
  .back {
    .main {
      .shortcut .nav {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;

        li {
          a {
            img {
              width: 40px;
              height: 40px;
            }
          }
        }
      }

      .logo {
        .user text {
          font-size: 14px;
        }

        .Weather text {
          font-size: 12px;
        }
      }

      .lbt {
        height: 150px;
      }
    }
  }
}

/* 底部导航样式覆盖 */
:deep(nav_bottom) {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background: main.getVal('primary_bg_color');
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}
</style>
